<template>
  <div class="etfPegging">
    <el-tabs v-model="activeName">
      <el-tab-pane label="ETF概念反查" name="etfNotion" class="etfNotion">
        <EtfNotion v-if="activeName === 'etfNotion'" />
      </el-tab-pane>
      <el-tab-pane label="个股反查" name="share">
        <EtfShare v-if="activeName === 'share'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import EtfNotion from './components/etfNotion.vue'
import EtfShare from './components/share.vue'

const activeName = ref<string>('etfNotion')
</script>

<style lang="scss" scoped>
.etfPegging {
  margin: 20px;
  border: 1px solid #d4d8e5;
  background: #fff;
  :deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
    padding-left: 20px;
  }
  :deep(.el-tabs__header) {
    margin: 0px;
  }
}
</style>
